<template>
	<view class="title">
		<span class="placeholderBox"></span>
		<view class="name">{{title}}</view>
		<view v-if="more" class="moreButton" @click="navigateToPage()">更多</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: ''
			},
			more: {
				type: Boolean,
				default: false
			},
			// 接收页面路径
			targetUrl: {
				type: String,
				required: true
			}
		},
		methods: {
			navigateToPage() {
				if (!this.targetUrl) {
					console.error('未指定跳转路径');
					return;
				}
				uni.navigateTo({
					url: this.targetUrl,
					success: () => {
					},
					fail: (err) => {
						console.error('跳转失败', err);
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		display: flex;
		margin: 25rpx 0;

		.placeholderBox {
			width: 14rpx;
			height: auto;
			background-color: #c30914;
			margin-right: 15rpx;
		}

		.name {
			font-weight: bold;
			font-size: 30rpx;
			flex: 1;
			width: 100%;
		}

		.moreButton {
			text-align: right;
			font-size: 20rpx;
			padding: 10rpx 15rpx;
			border-radius: 10rpx;
			background-color: #fefefe;
			color: #888888;
		}
	}
</style>